<template>
	<view class="content flex flex-wrap">

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">width/宽度(rpx)</view>
				<view style="width:20%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 60px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-150</view>
				<view style="width:30%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-225</view>
				<view style="width:40%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-300</view>
				<view style="width:50%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-375</view>
				<view style="width:60%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-450</view>
				<view style="width:70%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-525</view>
				<view style="width:80%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-600</view>
				<view style="width:90%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-675</view>
				<view style="width: 100%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-750</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">width/宽度(vw)</view>
				<view style="width:20%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 60px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-20vw</view>
				<view style="width:30%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-30vw</view>
				<view style="width:40%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-40vw</view>
				<view style="width:50%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-50vw</view>
				<view style="width:60%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-60vw</view>
				<view style="width:70%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-70vw</view>
				<view style="width:80%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-80vw</view>
				<view style="width:90%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-90vw</view>
				<view style="width: 100%;height: 30px;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 6px;padding-left: 4px;" class="c-ffffff bgc-0000ff box-border">w-100vw</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">height/高度(rpx)</view>
				<view class="flex justify-center items-end" style="width: 100%;height: 100%;">
					<view style="height:10%;width: 30px;font-size: 12px;border-radius: 6px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-150</view>
						</view>
					</view>
					<view style="height:30%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-450</view>
						</view>
					</view>
					<view style="height:50%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-750</view>
						</view>
					</view>
					<view style="height:70%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-1050</view>
						</view>
					</view>
					<view style="height:90%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-1350</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">height/高度(vh)</view>
				<view class="flex justify-center items-end" style="width: 100%;height: 100%;">
					<view style="height:20%;width: 30px;font-size: 12px;border-radius: 6px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-20vh</view>
						</view>
					</view>
					<view style="height:40%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-40vh</view>
						</view>
					</view>
					<view style="height:60%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-60vh</view>
						</view>
					</view>
					<view style="height:80%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-80vh</view>
						</view>
					</view>
					<view style="height:100%;width: 30px;font-size: 12px;border-radius: 6px;margin-left: 4px;" class="c-ffffff bgc-0000ff box-border">
						<view class="absolute bottom-0" style="width: 30px;height: 30px;transform: rotate(-90deg);">
							<view style="width: 60px;height: 30px;line-height: 30px;padding-left: 4px;">h-100vh</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">padding/内边距(rpx)</view>
				<view class="flex flex-wrap  content-center " style="height: 100%;">
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 60px;height: 60px;line-height: 60px;border-radius: 6px;font-size: 12px;">p-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-top: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 70px;line-height: 70px;border-radius: 6px;font-size: 12px;">pt-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-right: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 70px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">pr-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-bottom: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 70px;line-height: 70px;border-radius: 6px;font-size: 12px;">pb-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-left: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 70px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">pl-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding:0 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 60px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">px-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding:10px 0;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 60px;line-height: 60px;border-radius: 6px;font-size: 12px;">py-10</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">margin/外边距(rpx)</view>
				<view class="flex flex-wrap  content-center " style="height: 100%;">
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 60px;height: 60px;line-height: 60px;border-radius: 6px;font-size: 12px;">m-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-top: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 70px;line-height: 70px;border-radius: 6px;font-size: 12px;">mt-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-right: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 70px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">mr-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-bottom: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 70px;line-height: 70px;border-radius: 6px;font-size: 12px;">mb-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding-left: 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 70px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">ml-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding:0 10px;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 60px;height: 80px;line-height: 80px;border-radius: 6px;font-size: 12px;">mx-10</view>
					</view>
					<view style="width:80px;height: 80px;border-radius: 6px;margin-top: 10px;padding:10px 0;margin-left: 4px;" class="bgc-00ffff box-border">
						<view class="bgc-0000ff c-ffffff text-center" style="width: 80px;height: 60px;line-height: 60px;border-radius: 6px;font-size: 12px;">my-10</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">line-height/行高(rpx)</view>
				<view style="width:100%;line-height: 30px;font-size: 12px;border-radius: 6px;margin-top: 60px;" class="c-ffffff bgc-0000ff text-center">lh-30</view>
				<view style="width:100%;line-height: 40px;font-size: 12px;border-radius: 6px;margin-top: 6px;" class="c-ffffff bgc-0000ff text-center">lh-40</view>
				<view style="width:100%;line-height: 50px;font-size: 12px;border-radius: 6px;margin-top: 6px;" class="c-ffffff bgc-0000ff text-center">lh-50</view>
				<view style="width:100%;line-height: 60px;font-size: 12px;border-radius: 6px;margin-top: 6px;" class="c-ffffff bgc-0000ff text-center">lh-60</view>
				<view style="width:100%;line-height: 70px;font-size: 12px;border-radius: 6px;margin-top: 6px;" class="c-ffffff bgc-0000ff text-center">lh-70</view>
				<view style="width:100%;line-height: 80px;font-size: 12px;border-radius: 6px;margin-top: 6px;" class="c-ffffff bgc-0000ff text-center">lh-80</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">font-size/字体大小(rpx)</view>
				<view style="width:100%;font-size: 10px;border-radius: 6px;margin-top: 60px;" class="text-center">fs-20</view>
				<view style="width:100%;font-size: 15px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-30</view>
				<view style="width:100%;font-size: 20px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-40</view>
				<view style="width:100%;font-size: 25px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-50</view>
				<view style="width:100%;font-size: 30px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-60</view>
				<view style="width:100%;font-size: 35px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-70</view>
				<view style="width:100%;font-size: 40px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-80</view>
				<view style="width:100%;font-size: 45px;border-radius: 6px;margin-top: 6px;" class="text-center">fs-90</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">font-weight/字体粗细</view>
				<view style="width:100%;font-size: 26px;font-weight: 100;border-radius: 6px;margin-top: 60px;" class="text-center">fw-100</view>
				<view style="width:100%;font-size: 26px;font-weight: 200;border-radius: 6px;margin-top: 6px;" class="text-center">fw-200</view>
				<view style="width:100%;font-size: 26px;font-weight: 300;border-radius: 6px;margin-top: 6px;" class="text-center">fw-300</view>
				<view style="width:100%;font-size: 26px;font-weight: 400;border-radius: 6px;margin-top: 6px;" class="text-center">fw-400</view>
				<view style="width:100%;font-size: 26px;font-weight: 500;border-radius: 6px;margin-top: 6px;" class="text-center">fw-500</view>
				<view style="width:100%;font-size: 26px;font-weight: 600;border-radius: 6px;margin-top: 6px;" class="text-center">fw-600</view>
				<view style="width:100%;font-size: 26px;font-weight: 700;border-radius: 6px;margin-top: 6px;" class="text-center">fw-700</view>
				<view style="width:100%;font-size: 26px;font-weight: 800;border-radius: 6px;margin-top: 6px;" class="text-center">fw-800</view>
				<view style="width:100%;font-size: 26px;font-weight: 900;border-radius: 6px;margin-top: 6px;" class="text-center">fw-900</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">font-family/字体类型</view>
				<view class="flex">
					<view style="width:50%;">
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 60px;" class="text-center ff-1">类型 ff-1</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-2">类型 ff-2</view>
						<view style="width:100%;font-size: 14px;fborder-radius: 6px;margin-top: 6px;" class="text-center ff-3">类型 ff-3</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-4">类型 ff-4</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-5">类型 ff-5</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-6">类型 ff-6</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-7">类型 ff-7</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-8">类型 ff-8</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-9">类型 ff-9</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-10">类型 ff-10</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-11">类型 ff-11</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-12">类型 ff-12</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-13">类型 ff-13</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-14">类型 ff-14</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-15">类型 ff-15</view>
					</view>
					<view style="width:50%;">
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 60px;" class="text-center ff-16">类型 ff-16</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-17">类型 ff-17</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-18">类型 ff-18</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-19">类型 ff-19</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-20">类型 ff-20</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-21">类型 ff-21</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-22">类型 ff-22</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-23">类型 ff-23</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-24">类型 ff-24</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-25">类型 ff-25</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-26">类型 ff-26</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-27">类型 ff-27</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-28">类型 ff-28</view>
						<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center ff-29">类型 ff-29</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-ffffff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">text-align/文本对齐</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 60px;" class="text-left">text-left</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-center">text-center</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 6px;" class="text-right">text-right</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute bgc-0000ff" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute c-ffffff">color/字体颜色(可自行增删)</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 60px;" class="text-center c-ffffff">c-ffffff</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-eeeeee">c-eeeeee</view>
				<view style="width:100%;font-size: 14px;fborder-radius: 6px;margin-top: 4px;" class="text-center c-dddddd">c-dddddd</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-cccccc">c-cccccc</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-bbbbbb">c-bbbbbb</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-aaaaaa">c-aaaaaa</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-999999">c-999999</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-888888">c-888888</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-777777">c-777777</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-666666">c-666666</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-555555">c-555555</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-444444">c-444444</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-333333">c-333333</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-222222">c-222222</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-111111">c-111111</view>
				<view style="width:100%;font-size: 14px;border-radius: 6px;margin-top: 4px;" class="text-center c-000000">c-000000</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">background/背景颜色(可自行增删)</view>
				<view class="flex flex-wrap justify-center" style="margin-top: 60px;">
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-ffffff">bgc-ffffff</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-eeeeee">bgc-eeeeee</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-dddddd">bgc-dddddd</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-cccccc">bgc-cccccc</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-bbbbbb">bgc-bbbbbb</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-aaaaaa">bgc-aaaaaa</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-999999">bgc-999999</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-888888">bgc-888888</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-777777">bgc-777777</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-666666">bgc-666666</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-555555">bgc-555555</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-444444">bgc-444444</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-333333">bgc-333333</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-222222">bgc-222222</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-111111">bgc-111111</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-000000">bgc-000000</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-0000ff">bgc-0000ff</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-00ff00">bgc-00ff00</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-ff0000">bgc-ff0000</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-ffff00">bgc-ffff00</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-ff00ff">bgc-ff00ff</view>
					<view style="width:100px;height:26px;line-height:26px;font-size: 14px;" class="text-center bgc-00ffff">bgc-00ffff</view>
				</view>
			</view>
		</view>

		<view class="relative" style="width: 300px;height: 600px;">
			<image src="/static/iphone.png" class="absolute" mode="widthFix"></image>
			<view class="absolute" style="width: 260px;height: 466px;top: 72px;left: 28px;">
				<view style="line-height: 50px;width: 100%;font-size: 14px;" class="text-center absolute">z-index/层级</view>
				<view class="bgc-000000 relative overflow-hidden" style="margin-top: 60px;width:100%;height: 90%;">
					<view style="width:100%;height:100%;line-height:26px;font-size: 14px;" class="text-center bgc-0000ff z-1 absolute bottom-0">z-1</view>
					<view style="width:100%;height:90%;line-height:26px;font-size: 14px;left: 4%;" class="text-center bgc-00ff00 z-2 absolute bottom-0">z-2</view>
					<view style="width:100%;height:80%;line-height:26px;font-size: 14px;left: 8%;" class="text-center bgc-ff0000 z-3 absolute bottom-0">z-3</view>
					<view style="width:100%;height:70%;line-height:26px;font-size: 14px;left: 12%;" class="text-center bgc-ffff00 z-4 absolute bottom-0">z-4</view>
					<view style="width:100%;height:60%;line-height:26px;font-size: 14px;left: 16%;" class="text-center bgc-ff00ff z-5 absolute bottom-0">z-5</view>
					<view style="width:100%;height:50%;line-height:26px;font-size: 14px;left: 20%;" class="text-center bgc-00ffff z-6 absolute bottom-0">z-6</view>
					<view style="width:100%;height:40%;line-height:26px;font-size: 14px;left: 24%;" class="text-center bgc-0000ff z-7 absolute bottom-0">z-7</view>
					<view style="width:100%;height:30%;line-height:26px;font-size: 14px;left: 28%;" class="text-center bgc-00ff00 z-8 absolute bottom-0">z-8</view>
					<view style="width:100%;height:20%;line-height:26px;font-size: 14px;left: 32%;" class="text-center bgc-ff0000 z-9 absolute bottom-0">z-9</view>
					<view style="width:100%;height:10%;line-height:26px;font-size: 14px;left: 36%;" class="text-center bgc-ffff00 z-10 absolute bottom-0">z-10</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>

</script>